import React, { FC } from 'react'
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import styles from './ManagerLayouts.module.scss'
import { Button, Space, Divider, message } from 'antd'
import { createQuestionService } from '../services/question'
import { useRequest } from 'ahooks'
import { PlusOutlined, BarsOutlined, StarOutlined, DeleteOutlined } from '@ant-design/icons'
const ManagerLayouts: FC = () => {
    const nav = useNavigate()
    const { pathname } = useLocation()
    const { loading, run: handleCreateCli } = useRequest(createQuestionService, {
        manual: true,
        onSuccess(data) {
            nav(`/question/edit/${data.id}`)
            message.success('创建成功')
        }
    })
    return (
        <div className={styles.container}>
            <div className={styles.left}>
                <Space direction='vertical'>
                    <Button
                        type='primary'
                        size='large'
                        icon={<PlusOutlined />}
                        onClick={handleCreateCli}
                        disabled={loading}
                    >创建问卷
                    </Button>
                    <Divider style={{ borderTop: 'transparent' }} />
                    <Button
                        type={pathname.startsWith('/manager/list') ? 'default' : 'text'}
                        size='large'
                        icon={<BarsOutlined />}
                        onClick={() => nav('/manager/list')}
                    >我的问卷</Button>
                    <Button
                        type={pathname.startsWith('/manager/star') ? 'default' : 'text'}
                        size='large'
                        icon={<StarOutlined />} onClick={() => nav('/manager/star')}>星标问卷</Button>
                    <Button type={pathname.startsWith('/manager/trash') ? 'default' : 'text'} size='large' icon={<DeleteOutlined />} onClick={() => nav('/manager/trash')}>回收站</Button>
                </Space>
            </div>
            <div className={styles.right}><Outlet /></div>
        </div>
    )
}

export default ManagerLayouts